<template>
  <div class="tableCommon-wrapper">
    <div class="table-tool">
      <a-space>
        <a-tooltip title="隐藏/显示搜索栏">
          <a-button shape="circle" icon="search" @click="showSearchHandle" />
        </a-tooltip>
        <a-tooltip title="刷新表格">
          <a-button shape="circle" icon="reload" @click="reloadHandle" />
        </a-tooltip>
        <a-popover placement="bottom" title="显示/隐藏列" trigger="click">
          <template slot="content">
            <a-space direction="vertical">
              <div v-for="item in tableHead" :key="item.dataIndex">
                <a-checkbox v-model="dataModel[item.dataIndex]" @change="onChangeTableHead">
                  {{ item.title }}
                </a-checkbox>
              </div>
            </a-space>
          </template>
          <a-button shape="circle" icon="setting" />
        </a-popover>
      </a-space>
    </div>
    <a-table
      v-if="openSelect"
      :columns="tableColumns"
      :data-source="tableData"
      :loading="loading"
      :pagination="pagination"
      :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange, type: selectType }"
      @change="handleTableChange"
      :row-key="rowKey"
      :scroll="scroll"
      bordered
      size="middle"
    >
      <template
        slot-scope="text, record, index"
        :slot="slot"
        v-for="slot in Object.keys($scopedSlots).filter(key => key !== 'expandedRowRender')"
      >
        <slot :name="slot" v-bind="{ text, record, index }"></slot>
      </template>
    </a-table>
    <a-table
      v-if="!openSelect"
      :columns="tableColumns"
      :data-source="tableData"
      :loading="loading"
      :pagination="pagination"
      @change="handleTableChange"
      :row-key="rowKey"
      :scroll="scroll"
      bordered
      size="middle"
    >
      <template
        slot-scope="text, record, index"
        :slot="slot"
        v-for="slot in Object.keys($scopedSlots).filter(key => key !== 'expandedRowRender')"
      >
        <slot :name="slot" v-bind="{ text, record, index }"></slot>
      </template>
    </a-table>
  </div>
</template>

<script>
import request from '@/utils/request';

export default {
  name: 'baseTable',
  props: {
    tableHead: {
      type: Array,
      required: true
    },
    listApi: {
      type: String
    },
    scroll: {
      type: Object
    },
    rowKey: {
      type: String
    },
    selectType: {
      type: String,
      default: 'checkbox'
    },
    openSelect: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      loading: false,
      dataModel: {},
      tableData: [],
      tableColumns: [],
      queryParam: {
      },
      selectedRowKeys: [],
      pagination: {
        pageSize: 15,
        current: 1,
        total: 0,
        showTotal: total => `${total} 条`,
        pageSizeOptions: ['15', '20', '30', '40'],
        showQuickJumper: true,
        showSizeChanger: true
      },
    };
  },
  created(){
    // 动态生成列选择框属性
    var _this = this;
    this.tableHead.forEach(function(e) {
      if (e.hide === undefined || e.hide === true) {
        _this.dataModel[e.dataIndex] = true;
      } else {
        _this.dataModel[e.dataIndex] = false;
      }
    })
    
    // 生成表格列
    if (this.tableHead) {
      const tempColumns = [];
      this.tableHead.forEach(function(e) {
        if (e.hide === undefined || e.hide === true) {
          tempColumns.push(e);
        }
      });
      this.tableColumns = tempColumns;
    }
  },
  methods: {
    /**
     * 分页改变后触发
     */
    handleTableChange(val) {
      this.pagination.pageSize = val.pageSize;
      this.pagination.current = val.current;
      this.queryTable(this.queryParam);
    },
    /**
     * 查询表格
     */
    queryTable(queryData) {
      this.queryParam = queryData;
      this.loading = true;
      request.get(this.listApi, this.getQueryParam(queryData)).then(res => {
        const data = res.rows || [];
        this.pagination.total = res.total;
        Object.assign(this, {
          tableData: data,
          loading: false
        });
      });
    },
    /**
     * 设置查询参数
     */
    putData(data) {
      this.queryParam = this.getQueryParam(data);
    },
    /**
     * 获取分页参数
     */
    getQueryParam(data) {
      data.pageSize = this.pagination.pageSize;
      data.pageNum = this.pagination.current;
      return data;
    },
    /**
     * 选择框变化事件
     */
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys;
    },
    /**
     * 获取当前选中数据key
     */
    getSelectRowKeys() {
      return this.selectedRowKeys;
    },
    /**
     * 搜索按钮点击事件
     */
    showSearchHandle() {
      this.$emit('showSearchHandle');
    },
    /**
     * 刷新表格
     */
    reloadHandle() {
      this.queryTable(this.queryParam);
    },
    /**
     * 表格列变化
     */
    onChangeTableHead() {
      const tempColumns = [];
      let _this = this;
      this.tableHead.forEach(function(e) {
        if (_this.dataModel[e.dataIndex] === true) {
          tempColumns.push(e);
        }
      });
      this.tableColumns = tempColumns;
    }
  }
};
</script>
<style lang="scss" scoped>
.table-tool {
  position: absolute;
  right: 25px;
  top: 20px;
}
.ant-btn {
  line-height: 1.299;
}
</style>
